import React, { Component } from 'react'
import { connect } from 'dva';
import { Form, Input, Modal } from 'antd';
import { FormComponentProps } from "antd/lib/form/Form";

import { SearchCol, SearchRow } from '@/styled/form';

import { inject_unount } from '@/utils/middleware';

import { DropDownSelect } from '@/components/DropDownSelect';


interface Props extends FormComponentProps {
  dispatch?: Function,
  data?: {
    floorId?: string;
  },

  wrappedComponentRef?: any;
  visible?: boolean;
  onCancel?: Function;
  onCreate?: Function;
}

@connect(({ build_floor_area, routing }) => ({
  dict: build_floor_area.dict || {},
  location: routing.location,
}))
@inject_unount
class FormItem extends Component<Props, any> {
  state = {
    confirmDirty: false,
    autoCompleteResult: [],
    isNew: true,
  };
  formRef: any;

  onCancel = () => {
    this.props.onCancel()
  };

  onCreate = () => {

    this.props.onCreate()
  }

  render() {
    const { form, visible } = this.props;

    const { getFieldDecorator, getFieldValue } = form;
    const number = +getFieldValue('number') || 0;

    const formItemLayout = {
      labelCol: {
        xs: { span: 12 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 12 },
        sm: { span: 16 },
      },
    };

    const dict = {
      'area.number': {
        1: 1,
        2: 2,
        3: 3,
        4: 4,
        5: 5,
      }
    }

    const formItems = [...new Array(number || 0).keys()].map((k, index) => (
      <SearchCol span={24} key={k + 1}>
        <Form.Item
          {...formItemLayout}
          label={`区域名称${index + 1}`}
          required={true}
          key={k}
        >
          {getFieldDecorator(`names[${k}]`, {
            rules: [{
              required: true,
              message: "请输入区域名",
            }],
          })(<Input placeholder="区域名称" style={{ width: '100%' }} />)}
        </Form.Item>
      </SearchCol>
    ));

    return (
      <Modal
        visible={visible}
        title="新增"
        okText="保存"
        cancelText="取消"
        onCancel={this.onCancel}
        onOk={this.onCreate}
        destroyOnClose
      >
        <Form>
          <SearchRow>
            <SearchCol key={0} span={24}>
              <Form.Item
                label="新增数"
                {...formItemLayout}
              >
                {getFieldDecorator('number', {
                  rules: [{ required: true, message: '请选择新增数' }],
                })(
                  DropDownSelect(dict, 'area.number')
                )}
              </Form.Item>
            </SearchCol>
            {...formItems}
          </SearchRow>
        </Form>
      </Modal>
    );
  }
}

const FormList = Form.create<Props>({ name: 'form_in_modal' })(FormItem);
export default FormList;
